<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>多选选择器</title>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/dtree.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/index.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/lib/dtree/font/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="${s.base}/css/base/theme/theme.css"/>
    <style type="text/css">
         body,html{ height: 620px; overflow-y: hidden;}
        /****************按钮 开始************************/
        .cyt-btn, .cyt-btn-border {
            height:26px;
            line-height:24px;
            background: #5d9cec;
            border: 1px solid #5d9cec;
            color: #fff;
            border-radius:2px;
            cursor: pointer;
            font-size: 14px!important;
            padding:0 7px;
            /*min-width:90px;*/
            margin-right: 10px;
        }
        .cyt-btn span{
            margin-right:4px;
        }
        .cyt-btn-border span{
            margin-left: 5px;
        }

        .cyt-btn:last-child{
            margin-right: 0;
        }
        .cyt-btn-border i{
            margin-left: 5px;
            font-size: 12px;
        }
        .cyt-btn:hover{
            border: 1px solid #2b5ddd;
            background: #2b5ddd;
            cursor: pointer;
            color:#fff;
        }
        /****************按钮 结束************************/
        table.cyt-table{
            empty-cells: show;
            border-collapse: collapse;
            margin: 0 auto;
            table-layout: fixed;
            font-size: 12px;
            border: 1px solid #e4e4e4;
            color: #666;
        }
        table.cyt-table thead{
            width: 100%;
            height: 43px;
        }
        table.cyt-table thead th {
            background: #f5f5f5;
            height:41px;
            max-height:41px;
            font-size:14px;
            font-weight: bolder;
            color: #333;
            text-align: center;
            /*padding: 0 10px;*/
        }
        table.cyt-table td {
            height:36px;
            line-height:36px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            overflow: hidden;
            font-size: 14px;
            border: 1px solid #e4e4e4 !important;
            padding: 0 10px;
            background: #fff;
        }
        tbody.tbodywidth td {
            height: 39px;
            line-height: 39px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            overflow: hidden!important;;
            font-size: 14px;
            border: 1px solid #e4e4e4 !important;
            padding: 0 10px;
            background: #fff;
        }
        /*基础表格 下拉框特殊样式 开始 */
        table.cyt-table .cyt-custom-select span,
        table.table-td-height-60 .cyt-custom-select span{
            padding-left:0 ;
            text-align: center!important;
            text-indent: 30px;
        }
        table.cyt-table .cyt-custom-select{
            border: 0;
            display: block;
        }
        table.cyt-table .cyt-custom-option,
        table.table-td-height-60 .cyt-custom-option,
        table.cyt-table .cyt-select-tree{
            width: calc(100% + 20px)!important;
            left:-10px;
            top:35px;
        }
        table.table-td-height-60 .cyt-custom-option{
            top:45px!important;
        }
        table.cyt-table .cyt-select-tree{
            top:0;
        }

        table.cyt-table .cyt-custom-option li{
            text-align: center;
            text-indent: 0;
        }


        /*基础表格-特殊样式 开始*/
        table.table-th-radius-4 th{
            /*border-radius: 4px 4px 0 0;*/
        }/*th圆角4px*/

        table.table-th-bg-white thead th{
            background: #fff!important;
        }/*th背景白色*/

        table.table-thead-border thead{
            border:1px solid #ddd;
        }/*th有边框*/
        table.table-th-border thead th{
            border:1px solid #ddd;
        }/*th有边框*/
        table.table-th-padding-0 th{
            padding: 0px!important;
        }/*th左右边距0px*/
        table.table-th-padding-LR20 th{
            padding: 0 20px!important;
        }/*th左右边距0px*/
        table.table-th-linehight-23 th{
            line-height: 23px!important;
        }/*th行高23px*/

        .cyt-table-all>tbody>tr>td {
            overflow: visible;
            white-space: normal;
        }
        tbody.tbodywidth{width:calc(100% + 2px)!important;}
        tbody.tbodyheigh{height:calc(100% - 110px)!important;}
        /*thead固定 tbody滚动 开始*/
        table.table-th-fixed{
            border:none;
            border-collapse: collapse!important;
        }
        table.table-th-fixed thead{

        }
        table.table-th-fixed thead, table.table-th-fixed tbody tr{
            display:table;
            width: 100%;
            table-layout:fixed;
            border-collapse: collapse;
        }
        table.table-th-fixed tbody{
            display:block;
            width: calc(100% + 16px);
            height: calc(100% - 43px);
            overflow-y:scroll;
            overflow-x:hidden;
        }

        table.table-th-fixed tbody tr td {
            border-collapse: collapse!important;
        }
        /*thead固定 tbody滚动 结束*/
        table.table-th-2-line thead>th{
            height: 29px;
            line-height:30px;
            font-weight: bolder!important;
            box-sizing: border-box;
        }/*th两行样式*/

        table.table-th-2-line thead>tr>th{
            font-size: 14px;
            height:28px;
            line-height: 28px;
            font-weight: normal;
        }

        table.table-th-height-50 thead th{
            height:48px;
            line-height: 48px;
        }/*th高度50px*/

        table.table-th-padding-5 thead th{
            padding: 0 5px!important;
        }/*th左右内边距5px*/

        table.table-tr-click-hover tbody>tr:hover{
            background:#fff!important;
            border:1px solid red!important;
            cursor: pointer;
        }
        /*tr可双击进入滑动*/

        table.table-tr-no-click-hover tr:hover{
            background: #f5f5f5!important;
        }
        table.table-tr-no-click-hover tr:hover td{background:none;}
        /*tr不可双击进入滑动*/

        table.table-tr-hover-blue tr:hover{ background:#eaf5ff;}/*可点击tr鼠标滑过改变背景色*/
        table.table-tr-hover-blue tr:hover td{background:none;}


        table.table-td-padding-0 td{
            padding: 0px!important;
        }/*td左右边距0px*/

        table.table-td-padding-5 td{
            padding: 0 5px!important;
        }/*td左右边距5px*/

        table.table-fristTd-padding-10 td:first-child{
            padding: 0 10px!important;
            position: relative;
        }/*第一个td左右边距10px*/

        table.table-td-linehight-19 td{
            line-height:19px!important;
        }/*th行高19px*/

        table.table-td-fl td{
            text-align: left;
        }/*td文字左对齐*/

        table.table-td-normal td:nth-of-type(odd){
            text-align: center!important;
            background: #fff!important;
            width: auto!important;
        }/*td奇数列默认样式*/

        table.table-td-border-0 td{
            border:none!important;
        }/*td无边框*/
        table.table-td-normal td:nth-of-type(odd){
            text-align: center!important;
            background: #fff!important;
            width: auto!important;
        }/*td奇数列默认样式*/

        table.table-border-0{
            border:none!important;
        }/*表格无边框*/

        table.table-td-border-bottom td{
            border-bottom: 1px dashed #ddd!important;
        }/*td下边框虚线*/

        table.table-td-height-20 td{
            height:24px;
            line-height:24px;
        }/*th左右内边距5px*/

        table.table-td-height-60 td{
            height:58px;
            line-height: 58px;
        }/*td高度50px*/

        table.table-first-td-bolder td:first-child{
            font-weight: bolder;
            color:#333;
        }/*tr第一个td粗体*/
        /*基础表格-特殊样式 结束*/

        /*输入框  开始*/
        .cyt-input, .cyt-date input, .cyt-td-input{
            width:100%;
            height:30px;
            border: 1px solid #ddd;
            border-radius:2px;
            font-size:14px;
            color: #333;
            text-indent: 10px;
            box-sizing: border-box;
        }
        .cyt-input:focus{
            border-color: #51d6b5;
        }
        .cyt-td-input{
            text-indent:0px;
            text-align: center;
        }
        /*日期框  开始*/
        .cyt-date, .cyt-search{
            position: relative; border:1px solid #ddd; border-radius:2px;
        }
        .cyt-date input, .cyt-search input{/*padding-right:30px;*/padding-right:0; }
        .cyt-date span, .cyt-search span{
            position: absolute;
            right: 10px;
            top:4px;
            color: #FCB76F;
            font-size:18px;
            height: 22px;
            line-height: 22px;
            pointer-events:none;
        }/*span是浮动图标*/
        .cyt-search span{
            font-size: 18px;
            pointer-events:auto;
        }
        /*日期框 结束*/

        /*搜索框  开始*/
        .cyt-search span{
            color: #ddd!important;
        }
        /*************选择器 开始 董佑婷 2018-2-7****************/
        /*************选择器 开始 董佑婷 2018-2-7   方圆修改 2019-2-22****************/

        /*选择器-表单中显示 开始*/
        /*.cyt-form-personnel{*/
        /*width:100%;height:22px;*/
        /*padding-right: 22px;*/
        /*box-sizing: border-box;*/
        /*position: relative;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*}*/
        .cyt-form-personnel{
            /*width: calc(100% - 20px);*/
            width: 100%;
            min-height:22px; max-height:90px;line-height: 30px; margin: 0 auto;
            padding-right: 22px;
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
        }
        .cyt-item-table tr td .cyt-form-personnel{ margin-left:0!important;}
        .cyt-form-personnel span.personlist{
            width:calc(100% - 12px);min-height:22px; max-height:90px; overflow-y: auto; line-height:30px; display: block;  margin-right:7px; padding-right:5px;
        }

        span.personlist::-webkit-scrollbar {
            width:12px;
        }
        span.personlist::-webkit-scrollbar-track {
            background-color:#f1f1f1;
            -webkit-border-radius: 0 0 6px 6px;
            -moz-border-radius:0 0 6px 6px;
            border-radius:0 0 6px 6px;
        }
        span.personlist::-webkit-scrollbar-thumb {
            background-color:#c1c1c1;
        }
        .cyt-form-personnel .personnel-btn{
            right:0;
            position: absolute;
            font-size: 22px;
            color: #51d6b5!important;
            width: 22px;
        }
        .cyt-form-personnel p{
            width: 100%;
        }
        /*选择器-表单中显示 结束*/

        .cyt-personnel-ctn {
            width: 860px;
            padding:20px;
            background: #fff;
            height: 525px;
            margin-right: 0;
            overflow: hidden;
        }

        .cyt-personnel-ctn-tree,
        .cyt-personnel-ctn-left,
        .cyt-personnel-ctn-right,
        .cyt-personnel-ctn-center{
            float: left;
        }

        .cyt-personnel-ctn-center {
            width: 60px;
            padding:18% 10px 0 10px;
            box-sizing: border-box;
            text-align: center;
            display: table-cell;
            vertical-align: middle;

        }

        .cyt-personnel-ctn-tree::-webkit-scrollbar-track-piece,
        .cyt-personnel-ctn-left table tbody::-webkit-scrollbar-track-piece,
        .cyt-personnel-ctn-right table tbody::-webkit-scrollbar-track-piece{
            background-color:#f8f8f8;
        }
        .cyt-personnel-ctn-tree::-webkit-scrollbar,
        .cyt-personnel-ctn-left table tbody::-webkit-scrollbar,
        .cyt-personnel-ctn-right table tbody::-webkit-scrollbar {
            width:2px;
            height:2px;
        }
        .cyt-personnel-ctn-tree::-webkit-scrollbar-thumb,
        .cyt-personnel-ctn-left table tbody::-webkit-scrollbar-thumb,
        .cyt-personnel-ctn-right table tbody::-webkit-scrollbar-thumb {
            background-color:#dddddd;
            background-clip:padding-box;
            min-height:28px;
        }
        .cyt-personnel-ctn-tree::-webkit-scrollbar-thumb:hover,
        .cyt-personnel-ctn-left table tbody::-webkit-scrollbar-thumb:hover,
        .cyt-personnel-ctn-right table tbody::-webkit-scrollbar-thumb:hover {
            background-color:#bbb;
        }
        .cyt-personnel-ctn-tree{
            width: 220px;
            margin-right:20px;
            height: 100%;
            overflow: auto;
            border: 1px solid #ddd;
            box-sizing: border-box;
        }

        .cyt-personnel-ctn-left,
        .cyt-personnel-ctn-right {
            width: 280px;
        }
        .cyt-personnel-ctn-title{
            font-size: 16px;
            line-height: 30px;
            height: 30px;
        }

        .cyt-personnel-ctn-left-ctn,
        .cyt-personnel-ctn-right-ctn {
            width: 100%;
            border-radius:2px;
            border: 1px solid #ddd;
            height: 440px;
            overflow: hidden;
            box-sizing: border-box;
            margin-top: 10px;
        }
        .cyt-personnel-ctn-left-ctn table tbody,
        .cyt-personnel-ctn-right-ctn table tbody{
            width: 100%;
        }

        .cyt-btn-sel {
            min-width: 40px !important;
            height: 30px;
            margin-bottom: 20px;
            display: inline-block;
        }
        .cyt-btn-sel:last-child{
            margin-right: 10px!important;
        }
        .cyt-btn-sel i {
            color: #fff;
            width: 20px;
            height: 30px;
        }
        /*************选择器 结束****************/
        /*加载图标居中*/
        .layui-layer-loading2{margin:0 auto;}
        .layui-layer-shade{background: rgba(0,0,0,0.25)}
        .checkbox {display: inline-block;height: 16px;line-height: 16px;font-size: 14px;}
        .checkbox label {vertical-align: text-top;margin-top: -1px;min-width: 20px!important;}
        .checkbox label input[type=checkbox]{width: 16px;height: 16px;position: absolute;opacity: 0;cursor: pointer;z-index: 2;}
        .checkbox label span {width: 16px;height: 16px;display: block;border: 1px solid #d6d6d6;border-radius:2px;background: #fff;background-size:16px;background-repeat: no-repeat;background-position-x: 0px;}
        .checkbox label input[type=checkbox]:checked+span {background-position-y: 0px;background: #5FB878 url(../../../../images/dh.png) center no-repeat;border: 1px solid #5FB878;}
        .w190 {width: 190px!important;}
        .fr {float: right!important;}
        table.table, .TreeGrid {empty-cells: show;border-collapse: collapse;margin: 0 auto;table-layout: fixed;font-size: 12px;border-radius: 4px;color: #666;}
        .hidden {overflow: hidden!important;}
        .border-0 {border: 0!important;}
        table.table thead th {background: #f2f2f2;height: 39px;max-height: 39px;font-size: 14px;font-weight:bold;color: #333;text-align: center;padding: 0 10px;}
        table.table td {height: 36px;line-height: 36px;text-align: center;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;overflow: hidden;font-size: 14px;}
    </style>
</head>
<body>
<div class="cyt-personnel-ctn" style="width: 620px; height: 566px;">
    <div class="cyt-personnel-ctn-left">
        <div class="cyt-personnel-ctn-title">
            <label>搜索内容：</label>
            <div class="cyt-search w190 fr">
                <input type="text" class="cyt-input" placeholder="" id="keyWord"><span class="iconfont" id="searchBtn">&#xe6c0;</span>
            </div>
        </div>
        <div class="cyt-personnel-ctn-left-ctn ">
            <table class="table border-0 table-td-border-0 table-th-radius-4 table-th-padding-5 table-td-padding-0 table-fristTd-padding-10 hidden table-th-fixed"  width="100%" height="100%" id="showTable">
                <thead>

                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    <div class="cyt-personnel-ctn-center">
        <!--<button class="cyt-btn cyt-btn-sel" id="left_queryBtn_user_role"><i class="cy-page-right-single"></i></button>-->
        <!--<button class="cyt-btn cyt-btn-sel" id="left_queryBtn_user_group"><i class="cy-page-right-double"></i></button>-->
        <!--<button class="cyt-btn cyt-btn-sel" id="right_queryBtn_user_role"><i class="cy-page-left-single"></i></button>-->
        <!--<button class="cyt-btn cyt-btn-sel" id="right_queryBtn_user_group"><i class="cy-page-left-double"></i></button>-->
        <button class="cyt-btn cyt-btn-sel" id="left_queryBtn_user_role"><i class="layui-icon layui-icon-right"></i></button>
        <button class="cyt-btn cyt-btn-sel" id="left_queryBtn_user_group"><i class="layui-icon layui-icon-next"></i></button>
        <button class="cyt-btn cyt-btn-sel" id="right_queryBtn_user_role"><i class="layui-icon layui-icon-left"></i></button>
        <button class="cyt-btn cyt-btn-sel" id="right_queryBtn_user_group"><i class="layui-icon layui-icon-prev"></i></button>
    </div>
    <div class="cyt-personnel-ctn-right">
        <div class="cyt-personnel-ctn-title align-center">已选</div>
        <div class="cyt-personnel-ctn-right-ctn">
            <table class="table border-0 table-td-border-0 table-th-radius-4 table-th-padding-5 table-td-padding-0 table-fristTd-padding-10 hidden table-th-fixed" height="100%" width="100%"  id="showTableRight">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
    <div class="cyt-form-btn-box  fr" style="margin-top: 10px;">
        <button class="cyt-btn" type="button" id="save">确定</button>
        <button class="cyt-btn cyt-btn-cancel" type="button" id="cancel">取消</button>
    </div>
</div>


<script src="${s.base}/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${s.base}/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    layui.use(['form', 'jquery', 'layer', 'dtreeUtil', 'baseutil', 'dialog'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            dialog = layui.dialog,
            baseutil = layui.baseutil,
            dtreeUtil = layui.dtreeUtil;

        var currentIds="";//初始化选中对象id集合
        var title="";//标题名称
        var searchTip="";//搜索提示
        var midPageUrl="";//中间数据url接口
        var id="";
        var keyWord="";
        var dataList=[];


        $(function () {
            initData();//初始化数据
            initListener();//初始化监听
        });

        function initData() {
            var selectObjctParams=parent.cytSelectObjctParams();
            currentIds=selectObjctParams[0];
            title=selectObjctParams[1];
            searchTip=selectObjctParams[2];
            midPageUrl=selectObjctParams[3];
            //初始化页面数据
            initPage();
            //初始化数据
            initDataList(id,keyWord,true);
        }

        /**
         * 初始化页面数据
         */
        function initPage(){
            //设置标题
            var titleList=title.split(",");
            if(titleList!=null && titleList.length>0){
                var con='<tr><th width="50">' +
                    '<div class="checkbox" style="margin-left:-9px;">'+
                    '<label>'+
                    '<input type="checkbox" name="fullselect"><span></span>'+
                    '</label>'+
                    '</div>'+
                    '</th>';
                for(var i=0;i<titleList.length;i++){
                    con+='<th>'+titleList[i]+'</th>';
                }
                $(".table thead").html(con+"</tr>");
            }
            //设置搜索提示
            $("#keyWord").attr("placeholder",searchTip);
        }

        /**
         * 初始化数据
         */
        function initDataList(id,keyWord,initDataFlage){
            //获取当前右边已有数据id
            var rightIds="";
            $("#showTableRight tbody tr input[name='id']").each(function (index,obj) {
                if(rightIds!=""){
                    rightIds+=","+$(obj).val();
                }else {
                    rightIds=$(obj).val();
                }
            });
            var data= {id:id,keyWord:keyWord};
            baseutil.AjaxPostMark(midPageUrl,data,function (rows) {
                //清空数组
                dataList.splice(0,dataList.length);
                rows.forEach(function(e,i){
                    var obj={};
                    obj.id=e.id;
                    obj.name=e.name;
                    obj.showNameList=e.showNameList;
                    if((currentIds!=null && currentIds!="" && currentIds.indexOf(e.id)>=0)||(rightIds!=null && rightIds!="" && rightIds.indexOf(e.id)>=0)){
                        obj.status=true;
                    }else{
                        obj.status=false;
                    }
                    dataList.push(obj);
                });
                //初始化左边树
                initLeftPage();
                if(initDataFlage){
                    //初始化右边树
                    initRightPage();
                }
            });
        }



        /**
         * 初始化左边页面
         */
        function initLeftPage(){
            var str="";
            for (var i = 0; i < dataList.length; i++) {
                if (!dataList[i].status) {
                    str+='<tr>'+
                        '<td width="30">'+
                        '<input type="hidden" class="id" name="id" value="' + dataList[i].id + '">'+
                        '<input type="hidden" class="name" name="name" value="'+dataList[i].name+'">'+
                        '<div class="checkbox">'+
                        '<label>'+
                        '<input type="checkbox" name="singleselect"><span></span>'+
                        '</label>'+
                        '</div>'+
                        '</td>';
                    var nameList=dataList[i].showNameList;
                    if(nameList!=null&&nameList.length>0){
                        for(var j=0;j<nameList.length;j++){
                            str+='<td title="'+nameList[j]+'">'+nameList[j]+'</td>';
                        }
                    }
                    str+='</tr>';
                }
            }
            $("#showTable tbody").html(str);
        }

        /**
         * 初始化右边页面
         */
        function initRightPage(){
            //获取当前右边已有数据id
            var rightIds="";
            $("#showTableRight tbody tr input[name='id']").each(function (index,obj) {
                if(rightIds!=""){
                    rightIds+=","+$(obj).val();
                }else {
                    rightIds=$(obj).val();
                }
            });
            var str="";
            for (var i = 0; i < dataList.length; i++) {
                if (dataList[i].status) {
                    if(rightIds==""||rightIds.indexOf(dataList[i].id)<0){
                        str+='<tr>'+
                            '<td width="30">'+
                            '<input type="hidden" class="id" name="id" value="' + dataList[i].id + '">'+
                            '<input type="hidden" class="name" name="name" value="'+dataList[i].name+'">'+
                            '<div class="checkbox">'+
                            '<label>'+
                            '<input type="checkbox" name="singleselect"><span></span>'+
                            '</label>'+
                            '</div>'+
                            '</td>';
                        var nameList=dataList[i].showNameList;
                        if(nameList!=null&&nameList.length>0){
                            for(var j=0;j<nameList.length;j++){
                                str+='<td title="'+nameList[j]+'">'+nameList[j]+'</td>';
                            }
                        }
                        str+='</tr>';
                    }
                }
            }
            $("#showTableRight tbody").append(str);
        }


        function initListener() {
            //搜索
            $("#searchBtn").bind("click",function(){
                keyWord=$("#keyWord").val();
                //设置搜索数据
                initDataList(id,keyWord,false);
            });

            //全选事件监听
            $(":checkbox[name='fullselect']").click(function () {
                var checked = $(this).prop('checked');
                $(this).parents(".table").find(":checkbox[name='singleselect']").prop('checked', checked);
            });
            $(".table").on("click", ":checkbox[name='singleselect']", function () {
                debugger
                checkAll(this);
            });

            //单个左边移到右边
            $("#left_queryBtn_user_role").bind("click", function () {
                var ids = getSelectId("showTable");
                if (ids === '') {
                    dialog.msg( "请先选择操作的信息");
                    return false;
                }
                setDataList(ids,true);
                delSelectObj("showTable");
                initRightPage();
                $("#showTable :checkbox[name='fullselect']").prop('checked', false);
            });

            //全部左边移到右边
            $("#left_queryBtn_user_group").bind("click", function () {
                var ids = getAllId($("#showTable"));
                setDataList(ids,true);
                delAllObj("showTable");
                initRightPage();
                $("#showTable :checkbox[name='fullselect']").prop('checked', false);
            });

            //单个右边删除
            $("#right_queryBtn_user_role").bind("click", function () {
                var ids = getSelectId("showTableRight");
                if (ids === '') {
                    dialog.msg( "请先选择操作的信息");
                    return false;
                }
                setDataList(ids,false);
                delSelectObj("showTableRight");
                initLeftPage();
                $("#showTableRight :checkbox[name='fullselect']").prop('checked', false);
            });
            //全部右边移到左边
            $("#right_queryBtn_user_group").bind("click", function () {
                var ids = getAllId($("#showTableRight"));
                setDataList(ids,false);
                delAllObj("showTableRight");
                initLeftPage();
                $("#showTableRight :checkbox[name='fullselect']").prop('checked', false);
            });

            // 关闭
            $("#cancel").click(function () {
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index); //再执行关闭
            });
        }

        /**
         * 设置当前ids对象状态
         * @param ids
         * @param flage
         */
        function setDataList(ids,flage){
            if(ids!=null&&ids!=""){
                for (var i = 0; i < dataList.length; i++) {
                    if(ids.indexOf(dataList[i].id)>=0){
                        dataList[i].status=flage;
                    }
                }
            }
        }
        /***
         *获取指定对象选中Ids集合
         */
        function getSelectId(objId) {
            var arr = [];
            $("#"+objId+" tbody .checkbox :checkbox[name='singleselect']:checked").each(function (i, e) {
                var id = $(e).parents("tr").find("td:eq(0)").find('input').val();
                arr.push(id);
            });
            var ids = arr.join(",");
            return ids
        }

        /**
         * 选中移除对象
         */
        function delSelectObj(objId) {
            var length = $("#"+objId+" tbody .checkbox :checked").parents('tr');
            length.remove();
        }
        /**
         * 移除所有对象
         */
        function delAllObj(objId){
            var length = $("#"+objId+" tbody tr");
            length.remove();
        }

        /**
         * 双击点击事件右移
         */
        function dbClickLeftTr(obj) {
            var id=$(obj).parents("tr").find("td:eq(0)").find('input').val();
            setDataList(id,true);
            $(obj).parents("tr").remove();
            initRightPage();
        }
        /**
         * 双击点击事件左移
         */
        function dbClickRightTr(obj) {
            var id=$(obj).parents("tr").find("td:eq(0)").find('input').val();
            setDataList(id,false);
            $(obj).parents("tr").remove();
            initLeftPage();
        }
        /**
         * 单个点击事件
         */
        function clickTr(obj) {
            var object=$(obj).parent().find("input[type='checkbox']");
            if (object.attr("checked")== "checked") {
                object.attr("checked",false);
            } else {
                object.attr("checked",true);
            }
            checkAll(obj);
        }
        /**
         * 判断全选
         * @param obj
         */
        function checkAll(obj) {
            console.log("----1----");
            var checked = false;
            var allLength = $(obj).parents(".table").find(":checkbox[name='singleselect']").size();
            var allCheckedLength = $(obj).parents(".table").find(":checkbox[name='singleselect']:checked").size();
            if (allCheckedLength === allLength) {
                checked = true;
            } else {
                checked = false;
            }
            $(obj).parents(".table").find(":checkbox[name='fullselect']").prop('checked', checked);
        }



    });
</script>
</body>

</html>